<template>
  <c-modal :visible.sync="visible" title="新增系统" @ok="save" @close="clearData">
    <div class="edit-single">
      <div class="row" ref="ssoconfig_div">
        <div class="r-icon r-icon-0"></div>
        <a-select
          style="width: 100%"
          placeholder="请选择"
          option-label-prop="label"
          showArrow
          :getPopupContainer="(e) => $refs['ssoconfig_div']"
          dropdownClassName="c-select"
          @select="onSelect"
          :value="!visible || currentIdx < 0 ? undefined : ssoConfigList[currentIdx].systemName"
        >
          <template #suffixIcon>
            <span class="iconfont iconsanjiao3-copy"></span>
          </template>

          <a-select-option :value="item.systemName" :label="item.systemNameCn" v-for="(item, idx) in ssoConfigList" :key="idx">{{ item.systemNameCn }}</a-select-option>

          <!-- <a-select-option value="china" label="China">China (中国)</a-select-option>
          <a-select-option value="usa" label="USA">USA (美国) </a-select-option>
          <a-select-option value="japan" label="Japan">Japan (日本) </a-select-option>
          <a-select-option value="korea" label="Korea">Korea (韩国) </a-select-option> -->
        </a-select>
      </div>
      <div class="row">
        <div class="r-icon r-icon-1"></div>
        <a-input v-model="userName" placeholder="请设置系统账号"></a-input>
      </div>
      <div class="row">
        <div class="r-icon r-icon-2"></div>
        <a-input-password v-model="password" placeholder="请设置系统密码"></a-input-password>
      </div>
    </div>
  </c-modal>
</template>

<script lang="ts">
import Base from "@/controllers/base.ts";
import { Component } from "vue-property-decorator";
import { Select, Input } from "ant-design-vue";
import CModal from "@/components/CModal/index.vue";

@Component({
  name: "SigleEdit",
  components: {
    CModal,
    AInput: Input,
    AInputPassword: Input.Password,
    ASelect: Select,
    ASelectOption: Select.Option
  }
})
export default class SigleEdit extends Base {
  private init = false;
  private visible = false;
  private ssoConfigList: any[] = [];
  private currentIdx = -1;
  private systemName = "";
  private systemNameCn = "";
  private userName = "";
  private password = "";

  private created() {
    this.getSsoConfigList();
  }

  /**
   * @param {object} data 编辑数据
   * @param {boolean} show 指定visible的布尔值
   */
  private changeVisible(data: any, show: boolean) {
    if (data && Object.keys(data).length) {
      this.systemName = data.systemName;
      this.systemNameCn = data.systemNameCn;
      this.userName = data.userName;
      this.password = data.password;
    }

    this.setDefaultCurrentIdx();

    if (show === void 0) {
      this.visible = !this.visible;
    } else {
      this.visible = show;
    }
  }

  private setDefaultCurrentIdx() {
    if (this.systemName && this.ssoConfigList.length) {
      this.ssoConfigList.find((item: any, idx: number) => {
        if (item.systemName === this.systemName) {
          this.currentIdx = idx;
          return;
        }
      });
    }
  }

  private onSelect(value: string, option: any) {
    this.currentIdx = option.data.key;
  }

  private async getSsoConfigList() {
    const res = await this.$api.SsoConfigList();
    if (res && res.code === 200) {
      this.ssoConfigList = res.rows;
    }
  }

  private beforeSave() {
    let msg = "";
    if (this.currentIdx < 0) {
      msg = "请选择登录系统";
    }

    if (!this.userName && msg === "") {
      msg = "请填写用户名";
    }

    if (!this.password && msg === "") {
      msg = "请填写密码";
    }

    if (msg) {
      this.$message.destroy();
      this.$message.error(msg);
      return false;
    } else {
      return true;
    }
  }

  private async save() {
    if (!this.beforeSave()) {
      return;
    }

    const res = await this.$api.SsoInfoAdd(this.reqParams);
    if (res && res.code === 200) {
      this.visible = false;
      this.$message.destroy();
      this.$message.success("保存成功");
      this.$emit("success");
      this.clearData();
    }
  }

  private clearData() {
    this.currentIdx = -1;
    this.systemName = "";
    this.systemNameCn = "";
    this.userName = "";
    this.password = "";
  }

  private get reqParams() {
    const _return = {
      systemName: this.ssoConfigList[this.currentIdx].systemName,
      systemNameCn: this.ssoConfigList[this.currentIdx].systemNameCn,
      userName: this.userName,
      password: this.password
    };
    return _return;
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
/deep/.c-modal {
  .edit-single {
    .scale(margin-left, 74px);
    .scale(margin-right, 74px);

    .row {
      .scale(margin-top, 30px);
      display: flex;
      align-items: center;
      color: white;
      height: 36px;
      line-height: 36px;
    }

    .r-icon {
      flex-shrink: 0;
      width: 34px;
      height: 34px;
      background-repeat: no-repeat;
      background-size: 100%;
      margin-right: 20px;
    }

    .r-icon-0 {
      background-image: url("~@/assets/images/bg-21.png");
    }
    .r-icon-1 {
      background-image: url("~@/assets/images/bg-22.png");
    }
    .r-icon-2 {
      background-image: url("~@/assets/images/bg-23.png");
    }

    .iconsanjiao3-copy {
      font-size: 12px;
      color: #d8d8d8;
      transition-duration: 0.5s;
    }

    .ant-select-open {
      .iconsanjiao3-copy {
        transform: rotate(180deg);
      }
    }

    .ant-select-dropdown-menu-item {
      font-weight: normal;
      &:hover {
        background-color: #eff4fe;
      }
    }
    .ant-select-dropdown-menu-item-selected {
      color: #64acfb;
      background-color: #eff4fe;
      &::after {
        content: "\e639";
        font-family: "iconfont";
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
      }
    }

    .ant-input-password-icon {
      color: #2573d5;
    }
  }
}
</style>
